<template>
  <div class="flex-1 w-full h-full" id="dataInfoRef"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';


let option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号'],
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Direct',
      type: 'bar',
      barWidth: '60%',
      color: '#9dd3e8',
      data: [10, 52, 200, 334, 390, 330, 220, 300, 400, 450]
    }
  ]
};

const myChart = ref<any>()
let timer = ref<number | undefined>()
const init = () => {
  let chartDom = document.getElementById('dataInfoRef');
  if (myChart.value) {
    myChart.value.dispose()
  }
  if (chartDom) {
    myChart.value = echarts.init(chartDom);
    myChart.value.setOption(option);
  }
}
const implement = () => {
  if (unref(timer)) {
    clearTimeout(timer.value)
  }
  timer.value = setTimeout(() => {
    if (myChart.value) {
      myChart.value.dispose()
    }
    init()
  }, 1000)
}
onMounted(() => {
  init()
  window.addEventListener('resize', implement)
})

onUnmounted(() => {
  window.removeEventListener('resize', implement)
})
</script>